<template>
  <div class="workflowicon" v-for="(item, key) in workflowlist" :key="key" @click="router.push({path: '/workflow_detail', query: {id: item.id}})">
    {{ item.name }}
  </div>
</template>

<style scoped>
  .workflowicon{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import {useRoute, useRouter } from "vue-router";
  import http from "../http"

  const route = useRoute()
  const router = useRouter()

  let workflowlist = ref([])

  const getworkflowlist =()=>{
    http.get(`workflow/workflow_list/`)
    .then(res=>{
      console.log(res)
      workflowlist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  onMounted(()=>{
    getworkflowlist()
  })

</script>